<template>
  <div class="app-container">
    <el-row>
      <el-input
        v-model="query.s"
        prefix-icon="el-icon-search"
        style="width: 250px"
        placeholder="模板名称"
        @keyup.enter.native="search"
      ></el-input>

      <el-button style="margin-left: 5px" type="warning" @click="search" round
        >搜&nbsp;&nbsp;索</el-button
      >

      <el-button round type="primary" @click="createNew">添加</el-button>
      <el-button round type="success" @click="update">修改</el-button>
      <el-button round type="warning" @click="destory">删除</el-button>
    </el-row>

    <el-row>
      <el-table
        :data="ls"
        style="width: 100%"
        highlight-current-row
        @current-change="handleSelectionChange"
        @row-dblclick="dblclick"
      >
        <el-table-column prop="路径ID" label="路径ID" width="80">
        </el-table-column>
        <el-table-column prop="m" label="模板名称" width="150">
        </el-table-column>

        <el-table-column label="版本" prop="版本" :formatter="fmt" width="150">
        </el-table-column>

        <el-table-column prop="rsize" label="列数" width="80">
        </el-table-column>

        <el-table-column label="入院日诊疗" prop="inadmision10">
        </el-table-column>

        <el-table-column label="出院日诊疗" prop="outadmision10">
        </el-table-column>

        <el-table-column label="备注" prop="mark"> </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.current"
          :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="query.total"
        >
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { forms, desotryForm } from "@/api/pathway";
@Component({
  name: "tpl-form",
})
export default class extends Vue {
  private query: any = {
    page: 1,
    size: 10,
    total: 0,
    s: "",
  };

  private currentRows: any;
  //多选
  private handleSelectionChange(ls: Array<any>) {
    this.currentRows = ls;
  }
  private handleSizeChange(val: number) {
    this.query.page = 1;
    this.query.size = val;
    this.formLs();
  }

  private dblclick() {
    this.update();
  }
  private handleCurrentChange(val: any) {
    this.query.page = this.query.current = val;
    this.formLs();
  }

  private created() {
    this.search();
  }

  private createNew() {
    this.$router.push({
      path: "/clinicalpathway/ed-tpl-form",
    });
  }
  private update() {
    this.$router.push({
      path: "/clinicalpathway/ed-tpl-form",
      query: { id: this.currentRows.id },
    });
  }

  private async destory() {
    if (this.currentRows) {
      this.$confirm("你确定要删除选中的项目吗？").then(async () => {
        let d = await desotryForm({ id: this.currentRows.id });
        this.search();
      });
    }
  }

  private fmt(row: any, col: any, val: any) {
    let o: any = { "1": "内科版", "2": "操作版", "3": "手术版" };

    if (!o[val]) {
      return "";
    }
    return o[val];
  }

  private ls: Array<any> = [];

  private async search() {
    this.query.page = 1;
    this.formLs();
  }
  private async formLs() {
    let d: any = await forms(this.query);
    this.query.total = d.data.total;
    this.ls = d.data.records;
  }
}
</script>